<template>
  <uni-swiper-dot :info="info" :current="current" :field="field" :mode="mode" :dots-styles="dotsStyles">
    <swiper class="swiper-box" @change="onChange">
      <swiper-item v-for="(item, index) in info" :key="index">
        <slot name="swiperItem" :item="item" :index="index"></slot>
      </swiper-item>
    </swiper>
  </uni-swiper-dot>
</template>
<script setup>
const props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
  mode: {
    type: String,
    default:"default"
  },
  field: {
    type: String,
  },
  info: {
    type: Array,
  },
  dotsStyles: {
    type: Object,
  },
  ////////////////
  trigger: {
    type: String,
    validator(value) {
      return ["hover", "click"].includes(value);
    },
    default: "click",
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  interval: {
    type: Number,
    default: 3000,
  },
  indicatorPosition: {
    type: String,
    validator(value) {
      return ["outside", "none"].includes(value);
    },
    default: "none",
  },
  loop: {
    type: Boolean,
    default: true,
  },
  direction: {
    type: String,
    validator(value) {
      return ["horizontal", "vertical"].includes(value);
    },
    default: "horizontal",
  },
  pauseOnHover: {
    type: Boolean,
    default: true,
  },
});
const emits = defineEmits(["update:current"])
const onChange = (e)=>{
    console.log(e)
    emits("update:current",e.detail.current)
    
}
</script>
